﻿@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 

@section scripts{
        <script src="~/Areas/Sys/ViewModels/Menu.js"></script>
        <script type="text/javascript">
            using("lookup", easyuifix.datagrid_editor_extend);
            ko.bindingViewModel(new viewModel());
            using(['validatebox','combotree','numberspinner'],easyuifix.datagrid_editor_extend);
            var formatterEnable = function (value,row) {return '<img src="/Content/images/' + ((value||'').toString()=="true" ? "checkmark.gif" : "checknomark.gif") + '"/>';};
            var formatterParent = function (value, row) { return row.ParentName };
            var formatterButton = function (value, row) { return (row.URL&&row.URL!='#')?'<a href="#" onclick="setButton(\'' + row.MenuCode + '\')"><span class="icon icon-set2">&nbsp;</span>[设置按钮]</a>':''; };
        </script>
}
        <div class="z-toolbar">
            <a id="a_refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>
            <a id="a_add"    href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>
            <a id="a_edit"   href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a>
            <a id="a_del"    href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>
            <a id="a_save"  href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a>
        </div>
        
        <table id="gridlist" data-bind="treegrid:grid">
             <thead>  
                <tr>  
                    <th field="_id"  hidden="true"></th>  
                    <th field="MenuName"    align="left"        width="150" editor="{type:'validatebox',options:{required: true }}">菜单名称   </th>  
                    <th field="MenuCode"    align="left"        width="80"  editor="{type:'validatebox',options:{required: true }}">编码   </th>  
                    <th field="ParentCode"  align="left"        width="150"  editor="combotree" formatter="formatterParent">上级菜单   </th>
                    <th field="IconClass"   align="left"        width="180" editor="{type:'lookup'}">图标     </th> 
                    <th field="URL"         align="left"        width="180" editor="text">链接地址   </th> 
                    <th field="IsVisible"   align="center"      width="60" editor="{type: 'checkbox',options: {on: true,off: false}}" formatter="formatterEnable" >是否可见</th> 
                    <th field="IsEnable"    align="center"      width="60" editor="{type: 'checkbox',options: {on: true,off: false}}" formatter="formatterEnable" >是否启用</th> 
                    <th field="MenuSeq"     align="right"       width="50"  editor="text">排序</th> 
                    <th field="Button"      align="center"      width="100" formatter="formatterButton">页面按钮 </th> 
                </tr>                            
            </thead>      
        </table> 


<script type="text/html" id="button-template">
    <div style="margin:5px;height:320px;overflow:auto;">
        <style type="text/css">
            .listview{ margin:0 !important;}
            .listview li{width:100px !important;background-color:#ECECFF !important;float:left;margin:3px;overflow:hidden;}
            .listview span{ font-size:14px !important;height:auto !important; white-space: nowrap;}
            .listview .icon:before{content:"" !important}
        </style>

        <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
            <span class="icon32 icon-settings32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">请选择页面按钮</span> 
        </div>
 
        <div class="metrouicss">
            <label class="input-control checkbox" style="margin-top:6px;margin-left:3px;">
                <input type="checkbox" data-bind="checked:checkAll"><span class="helper">全选</span>
            </label>
            <button class="image-button standart fg-color-white" style="float:right" data-bind="click:manageClick">
            <i class="icon-grid-view bg-color-green"></i>
                管理按钮库
            </button>
            <ul class="listview" data-bind="foreach: buttons" style="clear:both">
                <li data-bind="click:$parent.buttonClick,css:{selected:Selected()>0}"><span class="icon" data-bind="text:ButtonName,css:ButtonIcon"></span></li>
            </ul>
        </div>
 
    </div>
    <div style="text-align:center;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script>

<script type="text/html" id="manage-template">
    <style type="text/css">
        .datagrid-wrap{border-width:0 0 1px 0;}
        .datagrid-toolbar{background-color:#E0ECFF !important}
    </style>

    <table data-bind="datagrid:grid">
        <thead>
            <th field="ButtonCode"    align="left" editor="{type:'validatebox',options:{required:true}}"    width="80"  >编码   </th>  
            <th field="ButtonName"    align="left" editor="{type:'validatebox',options:{required:true}}"    width="70"  >名称   </th>  
            <th field="ButtonIcon"    align="left" editor="{type:'validatebox',options:{required:true}}"    width="120" >图标   </th> 
            <th field="ButtonSeq"     align="left" editor="text"    width="50"  >排序   </th> 
            <th field="Description"   align="left" editor="text"    width="200" >备注说明   </th> 
        </thead>
    </table>
    
    <div style="text-align:center;margin:5px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script> 